<template>
	<div class="app-container">
		<el-row>
			<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" label-position="right"
				class="demo-ruleForm el-form-bottom">
				<div>
					<span>主播查看详情</span>
					<el-divider></el-divider>
				</div>
				<el-col :span="24">
					<el-form-item label="主播姓名" prop="name">
            <div class="yxkj-word-black" v-html="ruleForm.name"></div>
					</el-form-item>
				</el-col>
				<el-col :span="24">
					<el-form-item label="主播手机号" prop="mobile">
            <div class="yxkj-word-black">{{ ruleForm.mobile }}</div>
					</el-form-item>
				</el-col>
        <el-col :span="24">
        	<el-form-item label="主播状态" prop="state">
            <div class="yxkj-word-black">
              {{ codeBox.ACT_STATUS[ruleForm.state] }}
            </div>
        	</el-form-item>
        </el-col>
        <el-col :span="24">
        	<el-form-item label="是否置顶" prop="isTop">
            <div class="yxkj-word-black">
              {{ codeBox.YES_NO[ruleForm.isTop] }}
            </div>
        	</el-form-item>
        </el-col>
        <el-col :span="24">
        	<el-form-item label="权重" prop="sort">
            <div class="yxkj-word-black">
              <div class="yxkj-word-black" v-html="ruleForm.sort"></div>
            </div>
        	</el-form-item>
        </el-col>
        <el-col :span="16">
          <el-form-item label="背景图片" prop="image">
            <div class="yxkj-word-black">
        			<img :src="$imagePath + ruleForm.imageBg" class="avatar"/>
        		</div>
          </el-form-item>
        </el-col>
        <el-col :span="16">
          <el-form-item label="头像" prop="image">
            <div class="yxkj-word-black">
        			<img :src="$imagePath + ruleForm.image" class="avatar" />
        		</div>
          </el-form-item>
        </el-col>
        
				<el-col :span="24">
					<el-form-item label="主播年龄" prop="age">
            <div class="yxkj-word-black" v-html="ruleForm.age"></div>
					</el-form-item>
				</el-col>
        <el-col :span="16">
          <el-form-item label="主播性别" prop="sex">
            <div class="yxkj-word-black" v-html="ruleForm.sex"></div>
          </el-form-item>
        </el-col>
        
				<el-col :span="24">
					<el-form-item label="主播描述" prop="des">
            <div class="yxkj-word-black" v-html="ruleForm.des"></div>
					</el-form-item>
				</el-col>
				<el-form-item>
					<div class="fixed-bottom-20">
						<el-button type="success" @click="back">返回</el-button>
					</div>
				</el-form-item>
			</el-form>
		</el-row>
	</div>
</template>
<script>
	import {getCodeManager,codeToArray,uploadFileImage} from "@/api/all"
	import {editLiveAnchor} from "@/api/live"
	import {Message} from 'element-ui'
	export default {
		name: "anchoradd",
		data() {
			return {
				sex: [{
          name: '男'
        }, {
          name: '女'
        }],
				ruleForm: {
          id:0,
          name: "",
          mobile: "",
          password: "",
          imageBg: "",
          image: "",
          age: "",
          sex: "",
          des: "",
          state: "",
          isTop: "",
          sort: ""
				}
			};
		},
		created() {
      this.ruleForm.id = this.$route.query.id;
      this.getData(this.ruleForm.id)
      getCodeManager("ACT_STATUS,YES_NO", () => {});
		},
		methods: {
      getData(id) {
      	editLiveAnchor({ liveAnchorId: id }).then((res) => {
      		this.ruleForm.name = res.data.data.liveAnchor.name;
      		this.ruleForm.mobile = res.data.data.liveAnchor.mobile;
      		this.ruleForm.imageBg = res.data.data.liveAnchor.imageBg;
      		this.ruleForm.image = res.data.data.liveAnchor.image;
      		this.ruleForm.age = res.data.data.liveAnchor.age;
      		this.ruleForm.sex = res.data.data.liveAnchor.sex;
      		this.ruleForm.des = res.data.data.liveAnchor.des;
      		this.ruleForm.state = res.data.data.liveAnchor.state;
      		this.ruleForm.isTop = res.data.data.liveAnchor.isTop;
      		this.ruleForm.sort = res.data.data.liveAnchor.sort;
      	});
      },
			back() {
				history.back();
			}
		}
	}
</script>
<style scoped>
/deep/ [class*="el-col-"] {
  float: none;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 100px;
  height: 100px;
  line-height: 100px;
  text-align: center;
}
.avatar {
  display: block;
  height: 150px;
}

/deep/ .avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
/deep/ .avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
</style>
